<template>
 <el-form-item :label-width="item.labelWidth?item.labelWidth:'130px'" :label="item.title" :prop="rules?item.field:''">
    <span slot="label">{{item.title}}
        <el-tooltip v-if="item.info" :content="item.info" placement="top">
          <span class="fas fa-info-circle color"></span>
        </el-tooltip>
      </span>
    <el-cascader
      expand-trigger="click"
      :options="list"
      :change-on-select="item.changeOnSelect?item.changeOnSelect : true"
      :show-all-levels= "item.showAllLevels? item.showAllLevels : false"
      filterable
      v-model="checked"
      :disabled="disabled"
      @change="handleChange">
    </el-cascader>
  </el-form-item>

</template>
<style>
.el-cascader {
  width: 100%;
}
</style>

<script>
import { getOrgTree } from '../../../api/common';
export default {
  props: ['item', 'form', 'disabled', 'rules'],
  data() {
    return {
      list: [],
      selectedOptions: [],
      checked: [],
      casual: [],
      userOrgId: '',
      treeLeve: 0,
      treeData: false
    };
  },
  mounted: function() {
    // console.log(this.form)
    this.init();
    if (this.item.init) {
      this.item.init(this.form, this.item);
    }
  },
  methods: {
    init() {
      this.checked = [];
      if (this.form[this.item.field]) {
        this.userOrgId = this.form[this.item.field];
      }

      if (this.treeData) {
        this.formatTree(this.treeData);
        return;
      }
      getOrgTree().then(response => {
        if (response.success) {
          const data = response.data;
          if (data) {
            this.formatTree(data);
            this.list = data;
            this.treeData = data;
          }
        }
      });
    },
    formatTree(tree) {
      if (!tree) {
        return;
      }
      tree.forEach(element => {
        element.value = element.id;
        element.label = element.text;
        this.casual[this.treeLeve] = element.id;
        if (element.id === this.userOrgId) {
          this.casual.some(v => {
            if (v === this.userOrgId) {
              this.checked.push(v);
              return false;
            }
            this.checked.push(v);
          });
        }
        if (element.children) {
          this.treeLeve = this.treeLeve + 1;
          this.formatTree(element.children);
          this.treeLeve = this.treeLeve - 1;
        }
      });
    },
    handleChange(value) {
      this.form[this.item.field] = this.checked[this.checked.length - 1];
      // 值改变，触发回调
      if (this.item.formChange) {
        this.item.formChange(this.form, this.item);
      }
      if (this.item.itemChange) {
        this.item.itemChange(this.form, this.item, value);
      }
      if (this.item.showEditSituation) {
        const showItem = this.item.showEditSituation(this.form, this.item);
        this.item.hideEdit = !showItem;
      }
    }
  },
  watch: {
    form: {
      handler: function(v, oldV) {
        this.init();
      },
      deep: true
    }
  }
};
</script>
